<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>发朋友圈</title>
    <link rel="stylesheet" href="./css/zui.css">
    <link rel="stylesheet" href="./css/nav.css">
    <style>
      .form_img{
        width:50%;
        height: auto;
      }
    </style>
</head>
<body>
    <div class="header">
        <nav class="navbar navbar-inverse" role="navigation">
            <div class="container-fluid">
              <!-- 导航头部 -->
              <div class="navbar-header">
        
                <!-- 品牌名称或logo -->
                <a class="navbar-brand" href="/">朋友圈圈</a>
              </div>
          </nav>
    </div>
    <main>
        <div class="form-group">
            <label for="exampleInputAccount1">请输入内容</label>
             <textarea class="form-control" rows="13"  placeholder="请输入内容" id="msg"></textarea>
        </div>
        <div class="form-group">
        <label for="上传图片">上传图片</label>
        <input type="file" class="form-control fils" >
      </div>
      <div>
        <img src="" alt="" class="form_img">
      </div>
      <br>
        <button class="btn btn-block btn-success" type="button">发表</button>
    </main>
</body>
<script src="./js/jquery.js"></script>
<script src="./js/zui.js"></script>
<script src="./js/jquery.cookie.js"></script>
<script>
 let username = $.cookie("username");
 if(!username){
     window.location.href = './login.html'
 }
//  封装请求头像
 function getHeader (){
    return new Promise((resolve,reject)=>{
        $.ajax({
      url:"/get/user",
      method:"get",
      success:(res)=>{
        console.log(res.data)
        resolve(res.data)
      }
    })
    })
  }
  let imgurl;
  $(".fils").change((e)=>{
    let file = e.target.files[0];
    let data = new FormData();
    data.append("imgs",file);
    $.ajax({
      url:"/upload/img",
      method:"post",
      data:data,
      processData:false,
      contentType:false,
      success:(res)=>{
        console.log(res)
        $(".form_img").attr("src",res.url)
        imgurl = res.url
      }
    })
  })
  $(".btn-success").click(async function(){
    //  获取文本框内容
      let content = $("#msg").val();
    //   获取头像
     let header = await getHeader();
     if(!content){
        new $.zui.Messager("请您输入内容！", {
               type:"warning",
               icon: 'warning-sign',
               time:2000
            }).show(); 
        return
     }
     $.ajax({
         url:"/send/quan",
         method:"post",
         data:{
             content:content,
             header:header,
             imgurl:imgurl
         },
         success(res){
             console.log(res)
             if(res.code == 0){
                new $.zui.Messager("发布成功", {
               type:"success",
               icon: 'check',
               time:1000
            }).show(); 
              setTimeout(() => {
                window.location.href = '/'
              }, 1000);
             }else{
                new $.zui.Messager("发布失败", {
               type:"warning",
               icon: 'warning-sign',
               time:2000
            }).show(); 
             }
         }
     })
  })
 
</script>
</html>